<template>
  <div class="hot_wrap">
    <div class="list_wrap" v-for="(item, index) in mylist" :key="index">
      <div class="hot_left">
        <img v-if="mylist.length > 0" :src="item[0].pic" alt="" />
      </div>
      <div class="hot_right" v-if="item.length > 0">
        <h4 v-if="item.length > 0">{{ item[0].album }}</h4>
        <song-list :song-list="item" :isAlbum="true"></song-list>
      </div>
    </div>
  </div>
</template>
<script>
import { _getArtistAlbum, _getAlbum } from '../../../network/aritist'
import { formatDate } from '../../../utils/tool'
import songList from '../../../components/Songlist/song-list.vue'
console.log(songList)
export default {
  components: { songList },
  props: ['id'],
  data () {
    return {
      mylist: [],
      musicList: []
    }
  },
  created () {
    this.getAlbum()
  },
  methods: {
    async getAlbum () {
      this.musicList = []
      //根据歌手id获取歌手的专辑
      var res = await _getArtistAlbum(this.id)
      console.log(res)
      let list = res.data.hotAlbums //30专辑
      for (var k = 0; k < list.length; k++) {
        // 根据专辑id获取专辑下的歌曲
        var res = await _getAlbum(list[k].id)
        // console.log(res)
        let songsList = res.data.songs //专辑内的歌曲  songs:[]
        this.musicList[k] = [] //
        for (var i in songsList) {
          if (songsList.length > 0) {
            this.musicList[k].push({
              id: songsList[i].id,
              name: songsList[i].name,
              album: songsList[i].al.name,
              arist: songsList[i].ar[0].name,
              pic: songsList[i].al.picUrl,
              time: formatDate(new Date(songsList[i].dt), 'mm:ss')
            })
          }
        }
      }
      console.log(this.musicList) //整理好的数据存放到musicList
      //将musicList 赋值给mylist
      this.mylist = this.musicList
    }
  }
}
</script>
<style lang="less" scoped>
.hot_wrap {
  width: 95%;
  margin: 10px auto;
  .list_wrap {
    width: 95%;
    display: flex;
    margin-top: 20px;
    .hot_left {
      width: 120px;
      img {
        width: 100%;
        height: 120px;
      }
    }
    .hot_right {
      flex: 1;
    }
  }
}
</style>
